<template>
  <div id="app">
    <div class="top">
      <div class="logo" @click="goHome" title="返回主页">
        <div class="logo-img">
          <img src="../assets/imgs/slogo.png" alt="返回主页" />
        </div>
        <div class="logo-text">大家快来闻闻看</div>
      </div>
      <div class="text first" :class="type == 'index' ? 'change' : ''" @click="goHtml('index')">首页</div>
      <div class="text first" :class="type == 'hot' ? 'change' : ''" @click="goHtml('hot')">热门</div>
      <div class="text first" :class="type == 'find' ? 'change' : ''" @click="goFind">发现</div>
      <div
        class="text active"
        :class="type == 'activity' ? 'change' : ''"
        @click="goHtml('activity')"
      >活动中心</div>
      <div class="ipt">
        <input type="text" :placeholder="searchDefault" v-model="iptValue" @change="getIpt" />
        <div class="icon">
          <img src="../assets/imgs/fdj.png" />
        </div>
      </div>
      <div class="infor" @click="goInfor()">
        <div class="infocIcon">
          <img src="../assets/imgs/infor.png" />
        </div>
        <div class="redIcon" v-if="getInfor.messageCount !== 0 && getInfor.messageCount !== void 0"></div>
      </div>
      <div class="fans"></div>
      <div class="header" @click="showModal" v-if="userShow">
        <img :src="user.headImage" alt />
      </div>
      <div class="header" @click="showModal" v-else>
        <img src="../assets/imgs/default.png" alt />
      </div>
      <div class="modalHeader" v-if="show">
        <div class="modal-top">
          <div class="modal-btn" @click="goArticle('index', 1)">
            <div class="btn-icon">
              <img src="../assets/imgs/dianping.png" alt />
            </div>
            <div class="btn-text">我的点评</div>
          </div>
          <div class="modal-btn" @click="goHtml('collect')">
            <div class="btn-icon">
              <img src="../assets/imgs/sc.png" alt />
            </div>
            <div class="btn-text">我的收藏</div>
          </div>
          <div class="modal-btn" @click="goHtml('comment')">
            <div class="btn-icon">
              <img src="../assets/imgs/pinlun.png" alt />
            </div>
            <div class="btn-text">我的评论</div>
          </div>
          <div class="modal-btn" @click="goHtml('share')">
            <div class="btn-icon">
              <img src="../assets/imgs/fenxiang.png" alt />
            </div>
            <div class="btn-text">我的转发</div>
          </div>
        </div>
        <div class="modal-bottom">
          <div class="bottom-text" @click="goHtml('person')">账户设置</div>
          <div class="bottom-text quit" @click="quit" v-if="token">退出登录</div>
          <div class="bottom-text quit" @click="login" v-else>登录</div>
        </div>
      </div>
      <!-- <div class="hisContent" v-if="hisModal">
        <span class="his-tag">历史搜索</span>
        <span
          class="history"
          v-for="(item, index) in historyCtn"
          :key="index"
          @click="getKeyWord(index)"
          >{{ item }}</span
        >
      </div>-->
    </div>
  </div>
</template>

<script>
import defaultImg from "../assets/imgs/default.png";
export default {
  name: "nav-header",
  props: {
    type: {
      type: String,
      // default:'index'
    },
    page: {
      type: Number,
    },
    searchDefault: {
      type: String,
      default: "搜索感兴趣的内容",
    },
  },
  data() {
    return {
      show: false,
      list: [{}, {}, {}],
      hisModal: false,
      iptValue: "",
      user: "",
      Searchlist: [],
      currentPage: 1,
      historyCtn: [],
      userShow: true,
      inforNum: 0,
      codeShow: false,
      token: false,
    };
  },
  created() {
    if (localStorage.getItem("token") == void 0) {
      this.token = false;
    } else {
      this.token = true;
    }

    if (this.isToken()) {
      this.init();
    } else {
      this.userShow = false;
    }
  },
  watch: {
    //监听父组件传来的page
    page: {
      handler(newVal, oldVal) {
        this.currentPage = newVal;
      },
    },
  },
  computed: {
    getInfor() {
      return { ...this.$store.state.infromation };
    },
  },
  mounted() {
    this.getRem(1920, 100);
    //接受socket消息
  },
  methods: {
    init() {
      //展示用户信息
      this.$fetch("/laiwen/user/frontend/user", {}).then((res) => {
        console.log(res);
        this.userShow = true;
        this.user = res.user;
        this.defaultInfor(this.user, "headImage", defaultImg);
      });
      //查询搜索记录
      this.$post(`/laiwen/history/frontend/list?flag=1`, {}).then((res) => {
        this.historyCtn = res.list;
      });
      //建立socket
      this.WebSocket.initSocket();
      this.$store.dispatch("getSocket");
    },

    goFind(e) {
      this.$router.push({
        path: `/`,
      });
    },
    goHtml(e) {
      if (!this.tourist()) {
        return true;
      }
      this.text = e;
      this.$router.push({
        path: `/${e}`,
      });
    },
    goHome(e) {
      if (!this.tourist()) {
        return true;
      }
      this.$router.push({
        path: `/index`,
      });
    },
    //我的点评跳转
    goArticle(e, index) {
      if (!this.tourist()) {
        return true;
      }
      let num = index;
      this.$router
        .push({
          path: "/index",
          query: { index: num },
        })
        .catch((err) => {
          console.log(err);
        });
    },
    showModal() {
      this.show = !this.show;
    },
    //输入搜索
    getIpt() {
      if (!this.tourist()) {
        return true;
      }
      this.hisModal = true;
      // //搜索关键字
      //   this.$post(
      //     `/laiwen/article/frontend/slist?keyword=${this.iptValue}&page=${this.currentPage}&limit=3`,
      //     {}
      //   ).then((res) => {
      //     this.Searchlist = res.list;
      //     this.$emit("sendList", this.Searchlist);
      this.$router.push({
        path: "/searchRes",
        query: { keyword: this.iptValue },
      });
      // });
    },
    //点击搜索
    getKeyWord(index) {
      let keyword = this.historyCtn[index];
      //搜索关键字
      this.$post(
        `/laiwen/article/frontend/slist?keyword=${keyword}&page=${this.currentPage}&limit=5`,
        {}
      ).then((res) => {
        this.Searchlist = res.list;
        this.$emit("sendList", this.Searchlist);
      });
    },
    quit() {
      this.$router.push({
        path: `/login`,
      });
      //退出登入清除缓存
      localStorage.clear();
    },
    async goInfor() {
      if (!this.tourist()) {
        return true;
      }
      // let token = localStorage.getItem("token");
      // const res = await this.$post(`/laiwen/message/frontend/update`);
      this.$router.push({
        path: "/infor",
      });
    },
    //登录
    login() {
      this.$router.push({
        path: "/login",
      });
      //重新登入清除缓存
      localStorage.clear();
    },
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
#app {
  width: 100%;
}
img {
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  cursor: pointer;
  display: block;
}
.headerContent {
  width: 0.4rem;
  height: 0.45rem;
  position: relative;
}
.top {
  width: 100%;
  height: 0.58rem;
  background: #282828;
  display: flex;
  align-items: center;
  position: relative;
}
.top .logo {
  height: 0.47rem;
  margin-left: 0.66rem;
  margin-right: 2.4rem;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.top .logo .logo-img {
  width: 0.6rem;
  height: 0.47rem;
  margin-right: 0.17rem;
}
.top .logo .logo-text {
  font-size: 0.21rem;
  font-family: HuXiaoBo-NanShen;
  font-weight: 400;
  color: rgba(252, 236, 88, 1);
  opacity: 1;
}
.top .text {
  font-size: 0.16rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  opacity: 1;
  cursor: pointer;
  display: flex;
  justify-content: center;
}
.first {
  width: 0.72rem;
  height: 0.58rem;
  line-height: 0.58rem;
}
.active {
  width: 1.04rem;
  height: 0.58rem;
  margin-right: 0.4rem;
  line-height: 0.58rem;
}
.change {
  background: #000000;
  height: 0.56rem !important;
  line-height: 0.55rem;
  border-top: 0.02rem solid #ffe300;
}

.top .ipt {
  width: 3.28rem;
  height: 0.38rem;
  background: rgba(255, 255, 255, 1);
  opacity: 1;
  border-radius: 0.4rem;
  display: flex;
  align-items: center;
  margin-right: 5.6rem;
  overflow: hidden;
}
::-webkit-input-placeholder {
  font-size: 0.16rem;
  font-family: PingFang SC;
  font-weight: 500;
  line-height: 0.22rem;
  color: rgba(153, 153, 153, 1);
  opacity: 1;
}

.top .ipt input {
  height: 100%;
  width: 2.83rem;
  outline: none;
  border: none;
  box-sizing: border-box;
  font-size: 0.16rem;
  padding-left: 0.24rem;
}
.top .ipt .icon {
  width: 0.2rem;
  height: 0.2rem;
}
image {
  width: 100%;
  height: 100%;
  display: block;
}
.fansIcon {
  width: 0.16rem;
  height: 0.21rem;
  position: absolute;
  right: 0rem;
  bottom: 0;
}
.top .infor {
  width: 0.25rem;
  height: 0.27rem;
  opacity: 1;
  position: relative;
  cursor: pointer;
  margin-right: 0.44rem;
  display: flex;
  align-items: flex-end;
}
.top .infor .infocIcon {
  width: 0.21rem;
  height: 0.22rem;
  opacity: 1;
}
.top .infor .redIcon {
  width: 0.16rem;
  height: 0.16rem;
  background: rgba(241, 44, 32, 1);
  opacity: 1;
  border-radius: 50%;
  overflow: hidden;
  text-align: center;
  font-size: 0.11rem;
  font-family: SFUIDisplay-Regular;
  line-height: 0.16rem;
  color: rgba(255, 255, 255, 1);
  position: absolute;
  opacity: 1;
  top: 0;
  right: 0;
}
.top .header {
  width: 0.4rem;
  height: 0.4rem;
  overflow: hidden;
  border-radius: 50%;
  cursor: pointer;
  right: 0.94rem;
}
.modalHeader {
  width: 3.58rem;
  position: absolute;
  height: 1.34rem;
  z-index: 1111;
  right: 0.3rem;
  top: 0.58rem;
}
img {
  object-fit: cover;
}
.modalHeader  .modal-top {
  width: 100%;
  height: 0.86rem;
  display: flex;
  background: white;
  justify-content: space-between;
}
.modal-btn {
  width: 25%;
  height: 0.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 0.01rem solid #f4f4f4;
  align-items: center;
  margin-top: 0.17rem;
}
.modal-btn :nth-of-type(4n) {
  border: none;
}
.btn-icon {
  width: 0.26rem;
  height: 0.26rem;
  overflow: hidden;
  cursor: pointer;
  border-radius: 0.05rem;
  margin-bottom: 0.06rem;
}
.btn-text {
  /* width: 0.52rem; */
  height: 0.18rem;
  font-size: 0.13rem;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 0.18rem;
  color: rgba(48, 48, 48, 1);
  opacity: 1;
}
.modal-bottom {
  width: 3.58rem;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0 0.22rem;
  justify-content: space-between;
  height: 0.48rem;
  background: rgba(243, 244, 244, 1);
  border: 0.01rem solid rgba(242, 242, 242, 1);
  opacity: 1;
  font-size: 0.14rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: rgba(48, 48, 48, 1);
  cursor: pointer;
}
.quit {
  color: #ff6e04 !important;
}
.hisContent {
  width: 3.28rem;
  /* height: 2.4rem; */
  background: rgba(255, 255, 255, 1);
  box-shadow: 0rem 0.01rem 0.03rem rgba(0, 0, 0, 0.16);
  opacity: 1;
  position: absolute;
  top: 0.58rem;
  left: 8.2rem;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding-top: 0.16rem;
  padding-left: 0.22rem;
  padding-bottom: 0.22rem;
  border-radius: 0rem 0rem 0.01rem 0.01rem;
  z-index: 3333;
}
.his-tag {
  height: 0.18rem;
  font-size: 0.13rem;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 0.18rem;
  color: rgba(153, 153, 153, 1);
  opacity: 1;
}
.history {
  height: 0.18rem;
  font-size: 0.13rem;
  font-family: PingFang SC;
  font-weight: 400;
  cursor: pointer;
  line-height: 0.18rem;
  color: rgba(40, 40, 40, 1);
  opacity: 1;
  margin-top: 0.28rem;
}
</style>
